<template>
	<view class="PaymentManagement public">
		<view class="header">
			<text>*密码为数字6位</text>
		</view>
		<view class="main">
			<!-- v-if="setUp == 1" -->
			<view class="mian-item">
				<view class="notes">
					手机号
				</view>
				<view class="inputBox">
					<input type="number" placeholder="输入手机号" maxlength="11" v-model="phone" @blur="getphone">
					<!-- <text :class="regular.phone == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.phone}}</text> -->
					<uni-icons :type="regular.phone"></uni-icons>
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					验证码
				</view>
				<view class="inputBox flexjcsb">
					<input type="text" placeholder="输入验证码" v-model="code">
					<!-- <text>获取验证码</text> -->
					<button class="obtainCodes" @click="eventObtainCode"
						:disabled="isObtainCode">{{isObtainCode ? '重新获取' + obtainCode + 's' : '获取验证码'}}</button>
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					新密码
				</view>
				<view class="inputBox">
					<input type="number" maxlength="6" placeholder="输入新密码" v-model="xinpassword">
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					确认密码
				</view>
				<view class="inputBox">
					<input type="number" maxlength="6" placeholder="再次输入新密码" v-model="confirmPassword">
				</view>
			</view>
		</view>
		<view class="footer">
			<button @click="confirmpaw">确定</button>
		</view>
	</view>
</template>

<script>
	const $api = require('@/utils/request.js').API
	export default {
		data() {
			return {
				obtainCode: 60,
				isObtainCode: false,
				setUp: 0,
				phone: '',
				code: '',
				codekey: '',
				xinpassword: '',
				confirmPassword: '',
				regular: {
					phone: ''
				}
			}
		},
		onLoad() {
			this.doesTheUserSetAPaymentPassword()
		},
		methods: {
			// 检测用户是否设置支付密码
			doesTheUserSetAPaymentPassword() {
				$api.postDoesTheUserSetAPaymentPassword({}).then(res => {
					this.setUp = res.data.data
				})
			},
			// 设置修改支付密码
			confirmpaw() {
				if (!this.phone || !this.code || !this.xinpassword || !this.confirmPassword) {
					uni.showToast({
						title: '输入框里面不能为空',
						icon: 'none',
						duration: 2000
					})
				} else {
					if (this.xinpassword === this.confirmPassword) {
						$api.postSetUpDeitPassword({
							password: this.confirmPassword,
							key: this.codekey,
							code: this.code,
						})
					} else {
						uni.showToast({
							title: '新密码和确认密码不一致',
							icon: 'none',
							duration: 2000
						})
					}
				}
			},
			eventObtainCode() {
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
					this.packSetInterval()
					this.rechargePasswordCode()
				} else {
					uni.showToast({
						title: '请输入正确格式的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			packSetInterval() {
				this.isObtainCode = true
				let countdown = setInterval(() => {
					this.obtainCode--;
					if (this.obtainCode <= 0) {
						clearInterval(countdown)
						this.obtainCode = 60
						this.isObtainCode = false
					}
				}, 1000)
			},
			rechargePasswordCode() {
				$api.postRechargePasswordCode({
					mobile: this.phone
				}).then(res => {
					this.codekey = res.data.data.key
				})
			},
			// 正则验证
			getphone() {
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
					this.regular.phone = 'checkmarkempty';
				} else {
					this.regular.phone = 'closeempty';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.regularAnswer {
		color: #19be6b;
	}

	.regularWrong {
		color: #fa3534;
	}

	.PaymentManagement {
		background: #f7f7f7;

		.header {
			display: flex;
			align-items: center;
			height: 48rpx;
			background: #FFDBCD;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #F14500;
				line-height: 30rpx;
				padding-left: 41rpx;
			}
		}

		.main {
			background: white;

			.mian-item {
				display: flex;
				// justify-content: space-between;
				margin: 0 44rpx 0 41rpx;
				padding: 30rpx 0;
				border-bottom: 1px solid #E6E6E6;

				.notes {
					width: 190rpx;
				}

				.inputBox {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #999999;
					line-height: 30rpx;

					text {
						position: absolute;
						top: 10rpx;
						right: 0;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						line-height: 30rpx;
					}
					button::after {
						border: none;
					}
					.obtainCodes {
						position: absolute;
						top: 10rpx;
						right: 0;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						background: #FFFFFF;
						line-height: 30rpx;
					}
				}
			}

			.main-item:last-child {
				border-bottom: 0;
			}
		}

		.footer {
			margin-top: 100rpx;

			button {
				width: 684rpx;
				margin: auto;
				color: white;
				background: #F14500;
				border-radius: 40rpx;
			}
		}
	}
</style>